<template>
	<view class="resetPassword">
		<!-- 重置密码 -->
		<view class="header">
			<image class="image" src="/static/image/universal/arrows.png" mode="" @click="goBack"></image>
			<view class="text">
				重置密码
			</view>
		</view>
		
		<view class="content">
			<view class="nav">
				<view class="number">
					1
				</view>
				<view class="mobile">
					验证手机号
				</view>
			</view>
			
			<view class="inputBox">
				<image v-if="isShowMobile" class="img1" src="/static/image/login/mobile2.png" mode=""></image>
				<image v-else class="img1" src="/static/image/login/mobile1.png" mode=""></image>
				<input class="input" type="number" v-model="mobile" @input="mobileInput" placeholder="请输入手机号" placeholder-style="color: #A7AEBD;font-weight: 600;" />
				<image v-if="isShowClear" class="img2" src="/static/image/login/del1.png" mode="" @click="getClear"></image>
			</view>
			<view class="inputBox m40">
				<image v-if="isShowCode" class="img1" src="/static/image/login/code2.png" mode=""></image>
				<image v-else class="img1" src="/static/image/login/code1.png" mode=""></image>
				<input class="input p100" type="number" v-model="code" @input="codeInput" placeholder="请输入验证码" placeholder-style="color: #A7AEBD;font-weight: 600;" />
				<view class="code">获取验证码</view>
			</view>
		</view>
		
		<view class="button" @click="getNext">
			下一步
		</view>
	</view>
</template>

<script>
	export default{
		name: "resetPassword",
		data() {
			return {
				isShowMobile: false,     // 是否显示(选中的)手机图标
				isShowClear: false,		 // 是否显示清除图标
				mobile: "",     // 手机号
				isShowCode: "",          // 是否显示(选中的)code图标
			}
		},
		methods: {
			getClear(){
				this.mobile = ""
				this.isShowMobile = false
				this.isShowClear = false
			},
			
			mobileInput(e){
				if(e.detail.value){
					this.isShowMobile = true
					this.isShowClear = true
				}else{
					this.isShowMobile = false
					this.isShowClear = false
				}
			},
				
			codeInput(e){
				if(e.detail.value){
					this.isShowCode = true
				}else{
					this.isShowCode = false
				}
			},
			
			// 返回上一级
			goBack(){
				uni.navigateBack({
					delta: 1
				})
			},
			
			// 下一步
			getNext(){
				uni.navigateTo({
					url:"/subpackage-resetPwd/pages/setPassword"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.resetPassword {
		padding: 30rpx 44rpx;
		.header{
			display: flex;
			.image{
				width: 94rpx;
				height: 94rpx;
				margin-right: 20rpx;
			}
			.text{
				font-size: 64rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 600;
				color: #223247;
				line-height: 94rpx;
			}
		}
		
		.content{
			margin-top: 82rpx;
			.nav{
				display: flex;
				height: 76rpx;
				line-height: 76rpx;
				padding-left: 14rpx;
				margin-bottom: 88rpx;
				.number{
					width: 76rpx;
					height: 76rpx;
					background: #2F80ED;
					box-shadow: 0rpx 16rpx 18rpx 2rpx rgba(47, 128, 237, 0.27);
					border-radius: 50%;
					color: #FFFFFF;
					text-align: center;
				}
				.mobile{
					font-size: 40rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 600;
					color: #445469;
					margin-left: 30rpx;
				}
			}
			
			.inputBox {
				width: 100%;
				height: 110rpx;
				position: relative;
				.input{
					width: 100%;
					height: 100%;
					background-color: #F5F7FA;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					padding: 0rpx 90rpx;
					box-sizing: border-box;
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 600;
					color: #2F80ED;
				}
				.p100{
					padding-right: 255rpx;
				}
				.img1{
					position: absolute;
					top: 26rpx;
					left: 25rpx;
					width: 48rpx;
					height: 55rpx;
				}
				.img2{
					position: absolute;
					width: 48rpx;
					height: 48rpx;
					top: 32rpx;
					right: 25rpx;
				}
			}
			.m40{
				margin-top: 40rpx;
			}
			.code{
				position: absolute;
				top: 0;
				right: 36rpx;
				height: 110rpx;
				line-height: 110rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				color: #2F80ED;
				font-weight: 600;
			}
		}
		
		.button{
			width: 100%;
			height: 110rpx;
			background: #2F80ED;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			line-height: 110rpx;
			color: #FFFFFF;
			font-size: 40rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 600;
			text-align: center;
			margin-top: 180rpx;
		}
	}
</style>
